import React, {Component} from 'react';
import {
    View,
    StyleSheet,
    Text,
    StatusBar, Platform,
    TextInput,
    ScrollView,
    TouchableOpacity,
    AsyncStorage
} from 'react-native';
import {withNavigation} from 'react-navigation';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import HomeIcon from 'react-native-vector-icons/SimpleLineIcons';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import Swiper from 'react-native-swiper';
import moment from 'moment';
import HomeOperateIndex from './components/home-index/HomeOperateIndex';
import HomeImportantWork from './components/home-index/HomeImportantWork';
import HomeImportantFollow from './components/home-index/HomeImportantFollow';
import OperImpoRelation from './components/home-index/OperImpoRelation';
import Style from '../../components/Style';
import Tool from '../../components/Tool';
var Dimensions = require('Dimensions');
export default class HomeScreen extends Component {
    static navigationOptions = {
        header: <HomeHeader/>,
        tabBarIcon: ({focused, tintColor}) => {
            return <HomeIcon name={`home${focused ? '' : ''}`} size={20} color={Style.color.blue}/>;
        },
        tabBarLabel: '首页',
    };

    componentDidMount() {
        this._navListener = this.props.navigation.addListener('didFocus', () => {
            Platform.OS === 'android' && StatusBar.setBackgroundColor(Style.color.blue);
        });
    }

    componentWillUnmount() {
        this._navListener.remove();
    }

    render() {
        return (
            <View style={styles.container}>
                <StatusBar backgroundColor={Style.color.blue} barStyle="light-content"/>
                <HomeHeader/>
                <ScrollView>
                    <View>
                        <HomeNotice/>
                        <HomeCondition/>
                        <HomeImportantWork/>
                        <OperImpoRelation/>
                    </View>
                </ScrollView>
            </View>
        );
    }
}

const HomeHeader = withNavigation(class HomeHeader extends Component {
    render() {
        return (
            <View style={styles.headerView}>
                <TouchableOpacity onPress={()=> {this.props.navigation.openDrawer()}}>
                    <MaterialIcon name="account-circle" size={20} color={Style.color.white}
                                  style={{marginHorizontal:8}}/>
                </TouchableOpacity>
                <TouchableOpacity style={{flex:1}}
                                  onPress={() =>this.props.navigation.navigate('HomeSearch',{headerTitle:'搜索页面'}) }>
                    <Text style={{color:Style.color.white,fontSize:Style.fontSize.normal}}>提供指标、功能搜索</Text>
                </TouchableOpacity>
                <MaterialIcon name="keyboard-voice" size={20} color={Style.color.white} style={{marginHorizontal:8}}/>
            </View>
        );
    }
})

const HomeNotice = withNavigation(class HomeNotice extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [{name: '数据加载...'}]
        }
    }

    componentDidMount() {
        let _this = this;
        Tool.fetchAjax(Tool.appPath.mkst + "advertise/getNewestAdvertise", "", function (data) {
            if (data.state && data.info.list && data.info.list.length > 0) {
                _this.setState({list: data.info.list});
            } else {
                _this.setState({list: [{name: '欢迎使用营销沙盘APP'}]});
            }
        });
    }

    render() {
        return (
            <View style={{height:50,backgroundColor:Style.color.white,justifyContent:'center'}}>
                <View style={[styles.noticeInfoView,{width:Dimensions.get('window').width-40, alignSelf:'center'}]}>
                    <View style={styles.noticeIconView}>
                        <FontAwesome name='comments-o' size={18} color={Style.color.gray}/>
                    </View>
                    <Swiper paginationStyle={{bottom:0}} autoplay loop autoplayTimeout={3} showsPagination={false}
                            dotColor={Style.color.gray}
                            key={this.state.list.length}
                            activeDotColor={Style.color.blue}>
                        {this.state.list.map((item, index) => (
                            <View key={`HomeNoticeItem_${index}`}>
                                {
                                    item.id ?
                                        <TouchableOpacity
                                            onPress={() => this.props.navigation.navigate('NoticeDetail',{headerTitle:item.name,noticeId:item.id})}>
                                            <Text style={styles.noticeItemText} numberOfLines={1}>{item.name}</Text>
                                        </TouchableOpacity>
                                        :
                                        <View>
                                            <Text style={styles.noticeItemText} numberOfLines={1}>{item.name}</Text>
                                        </View>
                                }
                            </View>
                        ))}
                    </Swiper>
                </View>
            </View>

        );
    }
})

class HomeCondition extends Component {
    constructor(props) {
        super(props);
        this.state = {
            organize: '',
            opTime: moment().format('YYYY-MM-DD')
        }

    }

    componentDidMount() {
        AsyncStorage.getItem(Tool.storageConst.userKey, (err, result) => {
            if (result) {
                try {
                    let user = JSON.parse(result);
                    this.setState({organize: user.orgMgtName});
                } catch (err) {

                }
            }
        });
    }

    render() {

        return (
            <View style={[styles.conditionView,{width:Dimensions.get('window').width-40}]}>
                <Text style={styles.conditionItemText}>{this.state.organize}</Text>
                <Text style={styles.conditionItemText}>{this.state.opTime}</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1, backgroundColor: Style.color.screen
    },
    headerView: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        height: 44,
        backgroundColor: Style.color.blue
    },
    noticeInfoView: {
        height: 25, backgroundColor: '#E4F6FF', borderRadius: 12, borderWidth: 1, borderColor: Style.color.shadow
    },
    noticeItemText: {
        paddingVertical: 3, paddingLeft: 40, paddingRight: 10, color: Style.color.blue, fontSize: Style.fontSize.small
    },
    noticeIconView: {
        width: 30, height: 30, borderColor: Style.color.lightGray, borderWidth: 1, backgroundColor: Style.color.white,
        position: 'absolute', top: -2, alignItems: 'center', justifyContent: 'center', borderRadius: 15
    },
    conditionView: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingHorizontal: 10,
        paddingVertical: 2,
        marginTop: -10,
        backgroundColor:Style.color.white,
        borderRadius:50,
        alignSelf:'center',
    },
    conditionItemText: {
        fontSize: Style.fontSize.normal, color: Style.color.black
    }
});